<template>
	<view class="message">
		<view class="nav">
			<view @click="getsel(index)" :class="index==selNav?'nav-item hover':'nav-item'" v-for="(item,index) in navList" :key="index">
				<text>{{item.itemName}}</text>
			</view>
		</view>
		<view class="content">
			<view v-for="(item,index) in pageResult.list" :key="index" class="line">
				<view class="defaultInfo" >
					<view class="title">{{item.withdraw_no}}</view>
					<view class="time">{{item.create_time}}</view>
					<view class="allLine">收款人：{{item.realname}} / {{item.mobile}}</view>
					<view class="allLine">提现金额：￥{{item.cash}}</view>
					<view class="allLine">收款开户行：{{item.bank_name}}</view>
					<view class="allLine">收款卡号：{{item.account_number}}</view>
					<view class="allLine">提现说明：{{item.memo}}</view>
					<view class="allLine" v-if="item.status == 1" style="color: #008dd3;">{{item.transfer_remark}}</view>
					<view class="allLine" v-if="item.status == 1" style="display: flex;flex-direction: row-reverse;">
						<view class="btn" @click="cancelFun(index)">取消</view>
					</view>
					<view class="allLine" v-if="item.status == 3">转账流水：{{item.transfer_no}}</view>
					<view class="allLine" v-if="item.status == 3">转账凭证：
						<img :src="item.transfer_image" @click="previewImage(item.imgKey)"/>
					</view>
					<view class="allLine" v-if="item.status == 4" style="color: #cc0000;">{{item.transfer_remark}}</view>
					<view class="allLine" v-if="item.status == 5" style="color: #cc0000;">驳回原因：{{item.transfer_remark}}</view>					
					<SRV-status :name="item.status_name"  size="200" fontSize="50" boder="5" :color="item.status== 1 ? '#008dd3' : (item.status==4||item.status==5 ? '#cc0000' : '#009900')" style="position: absolute;right: 0;top: 40rpx;"></SRV-status>
				</view>
			</view>
			<view v-if="pageResult.list.length == 0" class="nocontent">
				<image :src="obtainImgUrl('icon/noItem.png')" mode="widthFix"></image>
			</view>
		</view>
		<view class="bottom" style="z-index: 10;" v-if="noWaitNum > 0">
			<view class="btn" @click="readAll()">全部已读</view>
		</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				navList: [
				   {"itemId": "0", "itemName" : "全部"},
				   {"itemId": "1", "itemName" : "申请中"},
				   {"itemId": "3", "itemName" : "已完成"},
				   {"itemId": "4", "itemName" : "已取消"},
				   {"itemId": "5", "itemName" : "已拒绝"},
				],
				selNav : 0,
				pageParam: {
					status: 0,
					page: 0,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				},
				imgList: [],
			}
		},
		methods: {
			getsel(index) {
				this.selNav = index;
				let item = this.navList[index];
				this.pageParam.status = item.itemId;
				this.pageParam.page = 0;
				this.pageResult.list = [];
				this.openStateList = [];
				this.getList();
			},
			getList() {
				var self = this;
				self.pageParam.page++
				serve.request({
					url: '/member/withdraw/list',
					data: self.pageParam
				}).then(res => {
					if (res.data && res.data.length > 0) {
						self.pageResult.list = self.pageResult.list.concat(res.data);
						self.imgList = [];
						let imgKey = 0;
						self.pageResult.list.forEach((i, k) => {
							i.imgKey = -1;
							if(i.status == 3 && i.transfer_image != '') {
								self.imgList[imgKey] = i.transfer_image;
								i.imgKey = imgKey;
								imgKey ++;
							}
						});
						console.info(self.pageResult.list)
					}
					self.pageResult.isEmpty = self.pageResult.list.length == 0;
					self.pageResult.isEnd = res.data.length == 0; 
				});
			},
			cancelFun(key) {
				var self = this;
				var item = self.pageResult.list[key];
				uni.showModal({
					title: '温馨提示',
					content: '您确定要取消该条提现申请吗',
					success: function (res) {
						if (res.confirm) {
							serve.request({
								url: '/member/withdraw/cancel',
								data:{
									id: item.id,
								}
							}).then(res => {
								var resCode = res.code;
								uni.showToast({
									title:res.message,
									icon: 'none',
									success() {
										if(resCode == 200) {
											self.pageResult.list[key].status = 4;
											self.pageResult.list[key].status_name = "已取消";
											self.pageResult.list[key].transfer_remark = "自主取消";
										}
									}
								});
								self.$forceUpdate();
							});
						} 
					}
				});
			},
			obtainImgUrl(imgUrl) {
				return serve.imgUrl()+imgUrl;
			},
			previewImage(current) {
				uni.previewImage({
					current: current,
					urls: this.imgList
				})
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
			this.getList();
		},
		onPullDownRefresh() {
			this.getList();
		},
		onReachBottom() {
			if(this.pageResult.isEnd ||this.pageResult.isEmpty){
				return
			}
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.message {
		width: 100%;
		
		.nav {
			box-sizing: border-box;
			padding: 40rpx 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx rgba(60, 72, 104, 0.1) solid;
			position: relative;
		
			.nav-item {
				height: 32rpx;
				padding: 0rpx 10rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(39, 52, 88, 0.5);
				border-bottom: 8rpx rgba(243, 204, 91, 0) solid;
			}
		
			.hover {
				border-bottom: 8rpx rgba(243, 204, 91, 1) solid;
				color: rgba(39, 52, 88, 1);
			}
			
			.numAbsolute {
				position: absolute;
				top: 22rpx;
				right: 40%;
				border: 1rpx solid #ff0000;
				background-color: #ff0000;
				color: #ffffff;
				border-radius: 50%;
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
				font-size: 26rpx;
			}
		}
		.bottom {
			z-index: 100;
			position: fixed;
			width: 100%;
			bottom: 0upx;
			border-top: 1upx rgba(235, 236, 240, 1) solid;
			align-items: center;
			display: flex;
			box-sizing: border-box;
			height: 120upx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 1px 0px 0upx rgba(235, 236, 240, 1);
			padding-left: 30upx;
			font-size: 24upx;
			color: rgba(60, 72, 104, 0.5);
			padding-bottom: env(safe-area-inset-bottom);    
			padding-top: 20rpx;
		
			.btn {
				position: absolute;
				height: 100%;
				width: 100%;
				background: rgba(235, 89, 56, 1);
				line-height: 100upx;
				text-align: center;
				font-size: 28upx;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
				top: 0;
				right: 0;
			}
		}
		.content {
			padding: 10rpx;
			.line {
				padding: 20rpx;
				border: 1rpx solid #ccc;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				
				.defaultInfo {
					display: flex;
					justify-content: space-between;
					position: relative;    
					align-items: center;
					flex-wrap: wrap;
					
					.dot {
						position: absolute;
						top: 24upx;
						left: -5upx;
						width: 14upx;
						height: 14upx;
						background: rgba(235, 89, 56, 1);
						border-radius: 50%;
					}
					.title {
						margin-left: 10rpx;
						width: 60%;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.time {
						
					}
					.allLine {
						margin-left: 20rpx;
						width: 100%;
						margin-top: 8rpx;
						display: flex;
						
						.btn {
							border: 1rpx solid #ffd900;
							width: 100rpx;
							text-align: center;
							padding: 10rpx 4rpx;
							background: #ffd900;
							color: #fff;
							border-radius: 20rpx;
							letter-spacing: 4rpx;
						}
						image {
							width: 200rpx;
							height: 200rpx;
						}
					}
					.infoIcon {
						position: absolute;
						right: 0;
						bottom: 0;
					}
					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
				.appentInfo {
					margin-top: 20rpx;
				}
			}

		}
		
		.nocontent{
			width: 100%;
			padding-top: 338upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:220upx;
				height:124upx;
			}
			text{
				font-size:28upx;
				color:rgba(204,204,204,1);
			     margin-top: 30upx;
			}
		}
	}
</style>
